
    new Vue({
    // 绑定主要操作区域
    el: "#app",
    data() {
    return {
    // 对话框的可见性
    editDialogVisible: false,
    addDialogVisible: false,
    // 表格数据
    tableData: [],
    // 总记录数
    total: 0,

    // 查询参数
    searchForm: {
    current: 1,
    pageSize: 10
},

    // 新增和编辑表单数据
    addDlgForm: {},
    editDlgForm: {}
}
},
    methods: {
    /**
     * 通用请求方法，处理POST、GET、PUT、DELETE请求
     * @param {string} url - 请求路径
     * @param {string} method - 请求方法
     * @param {Object} data - 请求数据
     * @returns {Promise} 返回axios请求的promise
     */
    requestData(url, method, data = {}) {
    return axios({ url, method, data }).catch(error => {
    this.$message.error('请求失败，请稍后再试');
    console.error(error);
});
},
    /**
     * 获取票据列表数据
     */
    fetchData() {
    // 发起ajax请求
    axios.post('/ticket/query', this.searchForm)
    .then(res => {
    if (res && res.data) {
    this.tableData = res.data.data.list;
    this.total = res.data.data.total;
}
});
},

    /**
     * 获取表格中每行的序号
     * @param {number} index - 当前行的索引
     * @returns {number} - 计算后的序号
     */
    indexMethod(index) {
    return (this.searchForm.current - 1) * this.searchForm.pageSize + index + 1;
},

    /**
     * 改变每页显示的数据条数
     * @param {number} pageSize - 每页显示的条数
     */
    handleSizeChange(pageSize) {
    this.searchForm.pageSize = pageSize;
    this.searchForm.current = 1;
    this.fetchData();
},


    // 跳转到指定页
    handleCurrentChange(current) {
    this.searchForm.current = current;
    this.fetchData();
},
    // 打开添加票据对话框
    openAddDialog() {
    this.addDialogVisible = true;
    // 清空表单数据
    this.addDlgForm = {}
},

    /**
     * 处理添加票据
     * @param {string} formName - 表单的ref名称
     */
    handleAdd(formName) {
    // 表单验证通过后提交数据
    this.$refs[formName].validate((valid) => {
    if (valid) {
    // 发起后端请求
    axios.post('/ticket', this.addDlgForm)
    .then(res => {
    if (res && res.data.code === 200) {
    this.$notify({
    title: '成功',
    message: '票据添加成功',
    type: 'success'
});

    this.addDialogVisible = false;
    this.addDlgForm = {} // 清空表单数据
    this.refresh();
} else {
    this.$notify({
    title: '操作失败',
    message: res.data.message,
    type: 'error'
});
}
});
}
})
},

    /**
     * 打开编辑票据的对话框
     * @param {number} id - 票据ID
     */
    openEditDialog(id) {
    // 获取后端数据对象
    axios.get('/ticket/' + id)
    .then(res => {
    if (res && res.data.code === 200) {
    this.editDlgForm = res.data.data;
    this.editDialogVisible = true;
} else {
    this.$message.error('数据加载失败')
}
});
},

    /**
     * 更新票据数据
     * @param {string} formName - 表单的ref名称
     */
    handleUpdate(formName) {
    this.$refs[formName].validate((valid) => {
    if (valid) {
    // 构造需要更新的数据
    let updateObj = this.editDlgForm;
    // 发起后端请求
    axios.put('/ticket', updateObj)
    .then(res => {
    // 判断是否成功
    if (res && res.data.code === 200) {
    this.editDialogVisible = false;
    this.$notify({
    title: '成功',
    message: '数据更新成功',
    type: 'success'
});
    this.refresh()
    this.$refs[formName].resetFields();
} else {
    alert(res.data.message);
}
});
} else {
    console.log('数据校验失败..')
    return;
}
})
},

    /**
     * 票据查询方法，根据搜索条件查询数据
     */
    query() {
    this.fetchData();
},

    /**
     * 删除票据
     * @param {number} id - 票据ID
     */
    handleDelete(id) {
    this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
}).then(() => {
    // 进入删除流程，向后台发起请求
    axios.delete('/ticket/' + id)
    .then(res => {
    if (res && res.data.code === 200) {
    this.refresh();
} else {
    console.log('删除失败!')
}
});
    this.$notify({
    title: '成功',
    message: '删除成功',
    type: 'success'
});
}).catch(() => {
});
},

    /**
     * 重置查询参数并重新加载数据
     */
    refresh() {
    this.searchForm = {
    current: 1,
    pageSize: 10
};
    this.fetchData();
},
    /**
     * 处理表格的排序
     * @param {Object} column - 排序的列信息
     */
    sortColumn(column) {
    this.searchForm.column = column.prop;
    this.searchForm.order = column.order;
    this.fetchData();
}
},

    /**
     * 在组件创建时获取初始数据
     */
    created() {
    this.fetchData();
},
});
